<template>
    <div class="container">
        <el-table :data="list" tooltip-effect="dark" stripe>
            <el-table-column width="50" label="ID" prop="id">
            </el-table-column>
            <el-table-column label="رەسىم ئادىرىسى" prop="imgUrl" header-align="center">
                <template slot-scope="{row,$index}">
                    <el-input class="edit-cell" v-if="showEdit[$index]" v-model="row.imgUrl" />
                    <span v-if="!showEdit[$index]">{{row.imgUrl}}</span>
                </template>
            </el-table-column>
            <el-table-column label="ئېلان تۈرى" prop="type">
                <template slot-scope="{row,$index}">
                    <template v-if="!showEdit[$index]">
                        <span v-if="row.type==0">سالون مەزمۇنى</span>
                        <span v-if="row.type==1">تور ئادىرىسى</span>
                        <span v-if="row.type==2">ئەپچاق</span>
                        <span v-if="row.type==3">كىنو</span>
                    </template>
                    <template v-else>
                        <!-- <input class="edit-cell" v-if="showEdit[$index]" v-model="row.type"> -->
                        <el-select v-model="row.type" placeholder="ئېلان تۈرىنى تاللاڭ">
                            <el-option v-for="v in adType" :key="v.value" :value="v.value" :label="v.label"></el-option>
                        </el-select>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="ئېلان ئادىرىسى" prop="adUrl">
                <template slot-scope="{row,$index}">
                    <el-input class="edit-cell" v-if="showEdit[$index]" v-model="row.adUrl" />
                    <span v-if="!showEdit[$index]">{{row.adUrl}}</span>
                </template>
            </el-table-column>
            <!--  <el-table-column width="120" label="تەھرىرلەش">
                <el-button type="primary" size="small" round icon="el-icon-edit">تەھرىرلەش</el-button>
            </el-table-column> -->
            <el-table-column fixed="right" label="تەھرىرلەش" width="240" header-align="center">
                <template slot-scope="{row,$index}">
                    <el-button type="success" round size="small" @click="handleUpdate($index, row)" v-if="showBtn[$index]">يېڭىلاش</el-button>
                    <el-button type="warning" round size="small" @click="handleCancel($index, row)" v-if="showBtn[$index]">ئەمەلدىن قالدۇرۇش</el-button>
                    <el-button type="primary" round size="small" @click="handleEdit($index, row)" v-if="!showBtn[$index]">تەھرىرلەش</el-button>
                    <el-button type="danger" round size="small" @click="handleDelete($index, row)" v-if="!showBtn[$index]">يۇيۇش</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-form :model="form" style="margin-top:20px;">
            <el-row>
                <el-col :span="7">
                    <el-form-item required label="رەسىم ئادىرىسى">
                        <el-input type="text" size="small" v-model="form.imgUrl" />
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item required label="ئېلان تۈرى">
                        <el-select v-model="form.type" placeholder="ئېلان تۈرىنى تاللاڭ">
                            <el-option v-for="v in adType" :key="v.value" :value="v.value" :label="v.label"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item required label="ئېلان ئادىرىسى">
                        <el-input type="text" size="small" v-model="form.adUrl" />
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="setSwiper" round icon="el-icon-plus">قوشۇش</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "Swiper",
    data() {
        return {
            form: {},
            adType: [
                { value: 0, label: "سالون مەزمۇنى" },
                { value: 1, label: "تور ئادىرىسى" },
                { value: 2, label: "ئەپچاق" },
                { value: 3, label: "كىنو" }
            ],
            list: [],
            row: [],
            showEdit: [], //显示编辑框
            showBtn: []
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            let res = await this.$http.get("/getSwiper");
            if (res.data.data.code == "001") {
                this.list = res.data.data.list;
            } else {
                this.$message.error(res.data.data.msg);
            }
        },
        setSwiper() {
            this.$http
                .post("/setSwiper", {
                    ...this.form
                })
                .then(res => {
                    if (res.data.data.code == "001") {
                        this.$message.success(res.data.data.msg);
                        this.getList()
                    } else {
                        this.$message.error(res.data.data.msg);
                    }
                });
        },
        handleEdit(index, row) {
            this.showEdit[index] = true;
            this.showBtn[index] = true;
            this.$set(this.showEdit, index, true);
            this.$set(this.showBtn, index, true);
        },
        //取消编辑
        handleCancel(index, row) {
            this.showEdit[index] = false;
            this.showBtn[index] = false;
            this.$set(this.showEdit, index, false);
            this.$set(this.showBtn, index, false);
        },

        //点击更新
        handleUpdate(index, row) {
            this.$http.post("/setSwiper?operate=edit", row).then(res => {
                if (res.data.data.code == "001") {
                    this.$message.success(res.data.data.msg);
                    this.showEdit[index] = false;
                    this.showBtn[index] = false;
                    this.getList();
                } else {
                    this.$message.error(res.data.data.msg);
                }
            });
        },
        //点击删除
        handleDelete(index, row) {
            this.$confirm("راستىنلا يۇيامسىز ?", "ئەسكەرتىش", {
                confirmButtonText: "ھەئە",
                cancelButtonText: "ياق",
                type: "warning"
            })
                .then(() => {
                    this.$http
                        .post("/setSwiper?operate=delete", row)
                        .then(res => {
                            if (res.data.data.code == "001") {
                                this.$message.success(res.data.data.msg);
                                this.showEdit[index] = false;
                                this.showBtn[index] = false;
                                this.getList();
                            } else {
                                this.$message.error(res.data.data.msg);
                            }
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "ئەمەلدىن قالدۇردىڭىز"
                    });
                });
        }
    }
};
</script>

<style lang="scss" scoped>
/deep/.el-input {
    width: 70%;
}
</style>